[#escape x as (x)!?html]
<form id="mobileMessageForm" action="${api}/letter/send-sms-code" method="post">
  <div class="modal-body">
    <div class="form-group">
      <div class="input-group">
        <div class="input-group-append">
           <div id="mobile-captcha-containerId"></div>
           <input type="hidden" name="captchaVerification" id="mobileCaptchaVerification">
           <input type="hidden" name="mobile" id="mobileReceiver" />
           <input type="hidden" name="scene" id="mobileScene" />
           <button id="mobileCaptchaBtn" class="d-none"></button>
        </div>
      </div>
    </div>
  </div>
</form>
[/#escape]
<script>
  $('#mobile-captcha-containerId').slideVerify({                                                
    baseUrl:'${base}',  //服务器请求地址;
    containerId:'mobileCaptchaBtn',//pop模式 必填 被点击之后出现行为验证码的元素id
    mode:'pop',     //展示模式
    imgSize : {       //图片的大小对象,有默认值{ width: '310px',height: '155px'},可省略
        width: '400px',
        height: '200px',
    },
    barSize:{          //下方滑块的大小对象,有默认值{ width: '310px',height: '50px'},可省略
        width: '400px',
        height: '40px',                                                                                                                                                                                                                                                                                                                                               
    },
    beforeCheck:function(){  //检验参数合法性的函数  mode ="pop"有效
        let flag = true;
        //实现: 参数合法性的判断逻辑, 返回一个boolean值
        return flag
    },
    ready : function() {},  //加载完毕的回调
    success : function(params) { //成功的回调
        // params为返回的二次验证参数 需要在接下来的实现逻辑回传服务器
        //例如: login($.extend({}, params))
        $("#mobileCaptchaVerification").val(params.captchaVerification)
        $("#mobileMessageForm").submit()
    },
    error : function() {
      alertTip("验证码错误");
    }        //失败的回调
}); 
function sendMobileMessage(element, scene) {
    $('#mobileCaptcha').val('');
    $('#mobileReceiver').val(element.val());
    $('#mobileScene').val(scene);
    $("#mobileCaptchaBtn").click()
}
$('#mobileMessageForm').validate({
  submitHandler: function (form,event) {
    event.preventDefault();
    request.post(form.action, $(form).serializeJSON()).then(function (response) {
      var data = response.data;
      if(data.result == null) return;
    });
  }
});
</script>
